<!--
 * @Description:
 * @Author: william
 * @Date: 2025-02-05 09:08:10
 * @LastEditors: william
 * @LastEditTime: 2025-05-10 09:57:27
-->
<template>
  <div :class="{ hidden: hidden }" class="pagination-container">
    <el-pagination
      v-model:page-size="pageSize"
      v-model:current-page="currentPage"
      :background="background"
      :page-sizes="pageSizes"
      :total="_total"
      :layout="layout"
      :="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @change="
        handleChange({
          pageSize,
          currentPage
        })
      "
    />
  </div>
</template>

<script setup>
const props = defineProps({
  hidden: {
    type: Boolean,
    default: false
  },
  background: {
    type: Boolean,
    default: true
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100]
  },
  total: {
    required: true,
    type: Number
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  }
})
const pageSize = defineModel('pageSize', {
  type: Number,
  default: 10
})
const currentPage = defineModel('currentPage', {
  type: Number,
  default: 1
})
const _total = computed(() => {
  return props.total * 1
})

const emit = defineEmits([
  'pagination',
  'sizeChange',
  'currentChange',
  'change'
])
const initPageSize = _this => {
  const tableEle = _this.$refs.refBaseTable.$el
  const tableHeaderEle = tableEle.querySelector('.el-table__header-wrapper')
  const pageSize = Math.ceil(
    (tableEle.offsetHeight - tableHeaderEle.offsetHeight) / 48
  )
  const pageSizeValue = size => {
    if (size > 50) return 100
    if (size > 20) return 50
    if (size > 10) return 20
    if (size > 2) return 10
    return 2
  }
  pageSize.value = pageSizeValue(pageSize)
}

const handleSizeChange = val => {
  currentPage.value = 1
  emit('sizeChange', val)
}

const handleCurrentChange = val => {
  emit('currentChange', val)
}

const handleChange = val => {
  emit('change', val)
}

defineExpose({
  initPageSize
})
</script>

<style scoped lang="scss">
.pagination-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10px;
  &.hidden {
    display: none;
  }
}
</style>
